import React from "react";
import { UploadFile, useUpload } from "../../../../store/useUpload";
import { Direction, Tooltip } from "../Tooltip";
import { FileIcon } from "../../../icons/FileIcon";
import styles from "./FilePreview.module.css";
import { CloseIcon } from "../../../icons/CloseIcon";

interface FilePreviewProps {
    file: UploadFile;
}

export const FilePreview: React.FC<FilePreviewProps> = ({ file }) => {
    const removeFile = useUpload((state) => state.removeFile);
    const onRemove = () => {
        removeFile(file.id);
    };
    const removeButton = (
        <div onClick={onRemove} className={styles.remove}>
            <CloseIcon />
        </div>
    );
    const TOP: Direction = "top";
    const tooltipProps = {
        content: file.fileName,
        direction: TOP,
        className: styles.container,
    };
    if (file.isImage) {
        return (
            <Tooltip {...tooltipProps}>
                <>
                    <img src={file.base64} />
                    {removeButton}
                </>
            </Tooltip>
        );
    } else {
        return (
            <Tooltip {...tooltipProps}>
                <>
                    <FileIcon />
                    {removeButton}
                </>
            </Tooltip>
        );
    }
};
